import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import moment from 'moment';
import {
  Grid,
  Typography,
  Box,
  useTheme
} from '@mui/material';

// Icons
import SubscriptionsIcon from '@mui/icons-material/Subscriptions';
import PaymentsIcon from '@mui/icons-material/Payments';
import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
import CancelIcon from '@mui/icons-material/Cancel';
import EventIcon from '@mui/icons-material/Event';
import AutorenewIcon from '@mui/icons-material/Autorenew';

// Styled Components
import {
  StyledPaper,
  StyledAppButton
} from 'components/objects/StyledComponents';

/**
 * Subscription Info component that displays subscription details in grid view
 * 
 * @param {Object} props
 * @param {Object} props.plan - Selected plan object with title, currency, and price
 * @param {Object} props.subscription - Current subscription object
 * @param {Function} props.onCancelSubscription - Function to handle subscription cancellation
 * @param {Function} props.formatMoney - Utility function to format currency
 */
const SubscriptionInfo = ({
  plan = {}, // Default to empty object to prevent undefined errors
  subscription = {}, // Default to empty object
  onCancelSubscription,
  formatMoney
}) => {
  const { t } = useTranslation();
  const theme = useTheme();
  const isDarkMode = theme.palette.mode === 'dark';

  // Helper function to format Unix timestamp to date
  const formatDate = (unixTimestamp) => {
    if (!unixTimestamp) return 'N/A';
    return moment.unix(unixTimestamp).format("DD/MM/YYYY");
  };

  // Info row component to avoid repetition
  const InfoRow = ({ icon, label, value }) => (
    <Box 
      sx={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center',
        py: 1.5,
        borderBottom: isDarkMode 
          ? '1px solid rgba(255, 255, 255, 0.05)' 
          : '1px solid rgba(0, 0, 0, 0.05)'
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        {icon}
        <Typography sx={{ ml: 1 }}>{label}</Typography>
      </Box>
      <Typography fontWeight="medium">{value}</Typography>
    </Box>
  );

  return (
    <Grid item xs={12} md={6}>
      <StyledPaper darkMode={isDarkMode} sx={{ p: 3 }}>
        {/* Subscription Header */}
        <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
          <SubscriptionsIcon 
            color="primary" 
            sx={{ fontSize: 32, mr: 2 }}
          />
          <Typography variant="h5" component="h1">
            {t("dashboardPage.yourSubscription")}
          </Typography>
        </Box>

        {/* Subscription Details */}
        <Box sx={{ mb: 3 }}>
          <InfoRow 
            icon={<PaymentsIcon sx={{ fontSize: 20 }} />}
            label={t("dashboardPage.plan")}
            value={plan?.title || t("dashboardPage.noPlanSelected")}
          />
          
          <InfoRow 
            icon={<AttachMoneyIcon sx={{ fontSize: 20 }} />}
            label={t("dashboardPage.price")}
            value={
              plan?.price !== undefined && plan?.currency
                ? formatMoney("it", plan.currency, plan.price)
                : "—"
            }
          />
          
          {subscription?.canceled_at ? (
            <>
              <InfoRow 
                icon={<CancelIcon color="error" sx={{ fontSize: 20 }} />}
                label={t("dashboardPage.canceledAt")}
                value={formatDate(subscription.canceled_at)}
              />
              
              <InfoRow 
                icon={<EventIcon color="warning" sx={{ fontSize: 20 }} />}
                label={t("dashboardPage.willDeactivateAt")}
                value={formatDate(subscription.current_period_end)}
              />
            </>
          ) : (
            <InfoRow 
              icon={<AutorenewIcon color="success" sx={{ fontSize: 20 }} />}
              label={t("dashboardPage.willRenewOn")}
              value={formatDate(subscription?.current_period_end)}
            />
          )}
        </Box>

        {/* Action Buttons */}
        <Grid container spacing={2} sx={{ mt: 2 }}>
          <Grid item xs={6}>
            <StyledAppButton 
              darkMode={isDarkMode}
              component={Link} 
              to="/plan" 
              fullWidth 
              variant="outlined"
              sx={{ py: 1 }}
            >
              {t("dashboardPage.changePlan")}
            </StyledAppButton>
          </Grid>
          
          {subscription && !subscription.canceled_at && (
            <Grid item xs={6}>
              <StyledAppButton 
                darkMode={isDarkMode}
                onClick={() => onCancelSubscription(subscription.id)} 
                fullWidth
                variant="outlined"
                color="error"
                disabled={!subscription.id}
                sx={{ py: 1 }}
              >
                {t("dashboardPage.deleteSubscription")}
              </StyledAppButton>
            </Grid>
          )}
        </Grid>
      </StyledPaper>
    </Grid>
  );
};

export default SubscriptionInfo;